<template>
  <div>
    <div class="detail_main">
      <div class="detail_top">
        <h2>关爱提醒</h2>
      </div>
      <div class="detail_containter">
        <TopFilter :list="topFilterList" :isSubmitBtn="true" :cols="4" labelWidth="120" :collapse="false" @filterChange="getMaintenanceRemindTable"></TopFilter>
        <ButtonArea :style="{ paddingLeft: '0px', textAlign: 'right' }">
          <el-button type="primary" icon="el-icon-plus" @click="historyFun">维修历史</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="importFun">维修建议</el-button>
          <el-button type="primary" icon="el-icon-printer" @click="openComplaintHistory">投诉历史</el-button>
          <el-button type="primary" icon="el-icon-folder">导出</el-button>
        </ButtonArea>
      </div>
    </div>

    <div class="detail_main">
      <div class="detail_top">
        <h2>关爱提醒信息</h2>
      </div>
      <div class="detail_containter">
        <FilterTable
          ref="basetable"
          selectionType="single"
          :fetchapi="fetchApi"
          :columns="columns"
          :params="fetchParams"
          :datakey="'rows'"
          :onColumnsChange="columns => (this.columns = columns)"
          :onRowSelectChange="columns => (this.selectColumn = columns)"
        ></FilterTable>
      </div>
    </div>

    <ButtonArea :style="{ paddingLeft: '0px', textAlign: 'center' }">
      <el-button type="primary" icon="el-icon-printer" @click="showRemind()">任务分派</el-button>
      <el-button type="primary" icon="el-icon-folder">短信发送</el-button>
      <el-button type="primary" icon="el-icon-refresh-left">预约安排</el-button>
      <el-button type="primary" icon="el-icon-refresh-left" @click="showInput()">提醒录入</el-button>
      <el-button type="primary" icon="el-icon-refresh-left" @click="showHistory()">提醒历史</el-button>
      <el-button type="primary" icon="el-icon-refresh-left">历史保单</el-button>
      <el-button type="primary" icon="el-icon-delete">Excel更新到日期月日</el-button>
    </ButtonArea>

    <!-- 维修历史 -->
    <Drawer :visible.sync="ishistorypop" title="维修历史"  destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <historypop :getdata="this.topFilterList[2].initialValue" @close="closeHandler" />
    </Drawer>

    <!-- 维修建议 -->
    <Drawer :visible.sync="isimportpop" title="维修建议"  destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <repairModal />
    </Drawer>

    <!-- 投诉历史 -->
    <Drawer :visible.sync="showComplaintHistory" title="投诉历史" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ComplaintHistory />
    </Drawer>

    <Drawer :visible.sync="historyVisible" title="历史提醒"  destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <remindHistory :getdata="setdata" @close="closeHistory"></remindHistory>
    </Drawer>
    <Drawer :visible.sync="historyOpVisible" title="提醒人员设置" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <remindOption :getdata="setRemindData" @close="closeRemindOption"></remindOption>
    </Drawer>
    <Drawer :visible.sync="inputVisible" title="提醒录入" :width="1300" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <remindsInput :remindData="setInputdata" @close="closeHistory"></remindsInput>
    </Drawer>
  </div>
</template>

<script>
import remindOption from './remindOption.vue';
import remindHistory from './remindHistory.vue';
import remindsInput from './remindsInput.vue';
import { getMaintenanceRemindTable } from '@/api/customerRepair/customerCare/maintenanceRemind';
import historypop from '@/pages/repair/business/customer/Repairhistory/historypop';
import repairModal from '@/pages/customerRepair/customerLoss/lossRemind/repairModal.vue';
import ComplaintHistory from '@/pages/repair/business/customer/combination/complaint';

export default {
  name: 'zjCustomerRepair',
  components: {
    remindHistory,
    remindOption,
    remindsInput,
    historypop,
    repairModal,
    ComplaintHistory
  },
  data() {
    return {
      topFilterList: this.createTop(),
      fetchApi: getMaintenanceRemindTable,
      columns: this.createTable(),
      selectColumn: [],
      fetchParams: {},
      historyVisible: false,
      historyOpVisible: false,
      inputVisible: false,
      setdata: {},
      setRemindData: {},
      setInputdata: {},
      ishistorypop: false, // 维修历史
      isimportpop: false, // 维修建议
      showComplaintHistory: false // 显示投诉历史dialog
    };
  },
  methods: {
    createTop() {
      return [
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'brandCode',
          itemList: []
        },

        {
          type: 'INPUT',
          label: '车主',
          fieldName: 'ownerName'
        },

        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'deliverer'
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'vin'
        },
        {
          type: 'RANGE_DATE',
          label: '下次保养日期',
          fieldName: 'nextmaintainDateFrom'
          // change: p => {
          //   console.log(p);
          // },
          // labelOptions: {
          //   fieldName: 'vin',
          //   initialValue: 1,
          //   itemList: [{ text: '下次保养日期', value: 1 }, { text: '保险结束日期', value: 2 }, { text: '客户生日', value: 3 }, { text: '活动有效期', value: 4 }],
          //   change: p => {
          //     console.log(p);
          //   }
          // }
        },
        {
          type: 'RANGE_DATE',
          label: '上次维修日期',
          fieldName: 'lastMaintainDate'
          // change: p => {
          //   console.log(p);
          // },
          // labelOptions: {
          //   fieldName: 'vin',
          //   initialValue: 1,
          //   itemList: [{ text: '上次维修日期', value: 1 }, { text: '上次保养日期', value: 2 }, { text: '提醒日期', value: 3 }],
          //   change: p => {
          //     console.log(p);
          //   }
          // }
        },
        {
          type: 'RANGE_DATE',
          label: '优惠截止日期',
          fieldName: 'discountExpireDateBegin'
          // change: p => {
          //   console.log(p);
          // },
          // labelOptions: {
          //   fieldName: 'vin',
          //   initialValue: 1,
          //   itemList: [{ text: '首次进厂日期', value: 1 }, { text: '优惠截止日期', value: 2 }, { text: '保修结束日期', value: 3 }],
          //   change: p => {
          //     console.log(p);
          //   }
          // }
        },
        {
          type: 'INPUT',
          label: '未进场天数',
          fieldName: 'insuranceDate'
        },
        {
          type: 'RANGE_DATE',
          label: '销售日期',
          fieldName: 'salesDateFrom|salesDate',
          valueFormat: 'yyyy-MM-dd'
        },

        {
          type: 'INPUT',
          label: '保险到期月',
          fieldName: 'startInsuranceMonth'
        },
        {
          type: 'INPUT',
          label: '至',
          fieldName: 'endInsuranceMonth'
        },
        {
          type: 'INPUT',
          label: '保险到期日',
          fieldName: 'startInsuranceDate'
        },
        {
          type: 'INPUT',
          label: '至',
          fieldName: 'endInsuranceDate'
        },
        {
          type: 'RANGE_DATE',
          label: '最近提醒日期',
          fieldName: 'remindDateBegin|remindDateEnd',
          valueFormat: 'yyyy-MM-dd'
        },
        // {
        //   type: 'SELECT',
        //   label: '车主性质',
        //   fieldName: 'ownerProperty',
        //   initialValue: '',
        //   itemList: []
        // },
        // // {
        // //   type: 'SELECT',
        // //   label: '选择',
        // //   fieldName: 'remindStatus',
        // //   initialValue: '',
        // //   itemList: []
        // // },
        // // PS:等组件开发完毕
        // {
        //   type: 'SELECT',
        //   label: '是否激活',
        //   fieldName: 'isValid',
        //   initialValue: '',
        //   itemList: []
        // },
        // {
        //   type: 'SELECT',
        //   label: '是否回厂',
        //   fieldName: 'isSuccessRemind',
        //   initialValue: '',
        //   itemList: []
        // },
        //  {
        //   type: 'CHECKBOX',
        //   label: '显示到期未进厂客户',
        //   fieldName: 'isSalePriceBigger',
        //   initialValue: '',
        //   itemList: []
        // },

        {
          type: 'INPUT',
          label: '服务活动',
          fieldName: 'activity',
          unitRender: props => {
            return <el-button icon="el-icon-search"></el-button>;
          }
        },
        {
          type: 'CHECKBOX',
          label: '排除已参与活动车辆',
          fieldName: 'exceptJoinActivityCar',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '提醒状态',
          fieldName: 'remindWay',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '是否提醒回厂',
          fieldName: 'isRemind',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '监控信息',
          fieldName: 'remindInfo',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '是否激活',
          fieldName: 'remindStatus',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '提醒方式',
          fieldName: 'remindStatus',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '上次接待服务顾问',
          fieldName: 'lastServiceAdvisor',
          itemList: []
        },

        {
          type: 'SELECT',
          label: '定保专员',
          fieldName: 'maintainAdvisor',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '客服专员',
          fieldName: 'hotlineAdvisor',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '保险专员',
          fieldName: 'insuranceAdvisor',
          itemList: []
        }
      ];
    },
    createTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '经销商',
          dataIndex: 'ascShortname',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ascShortname}</span>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'license',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.license}</span>;
          }
        },
        {
          title: '车主',
          dataIndex: 'vin',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.vin}</span>;
          }
        },
        {
          title: '品牌',
          dataIndex: 'brandName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.brandName}</span>;
          }
        },
        {
          title: '车系',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.seriesName}</span>;
          }
        },
        {
          title: '车型',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.modelName}</span>;
          }
        },
        {
          title: '车主编号',
          dataIndex: 'ownerNo',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerNo}</span>;
          }
        },
        {
          title: '车主',
          dataIndex: 'ownerName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerNo}</span>;
          }
        },
        {
          title: '车主电话',
          dataIndex: 'phone',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.phone}</span>;
          }
        },
        {
          title: '车主手机',
          dataIndex: 'mobile',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.mobile}</span>;
          }
        },
        {
          title: '车主地址',
          dataIndex: 'address',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.address}</span>;
          }
        },
        {
          title: '送修人',
          dataIndex: 'deliverer',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.deliverer}</span>;
          }
        },
        {
          title: '送修人手机',
          dataIndex: 'delivererMobile',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '送修人电话',
          dataIndex: 'delivererPhone',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '联系人',
          dataIndex: 'contactorName',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '联系人手机',
          dataIndex: 'contactorMobile',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '联系人电话',
          dataIndex: 'contactorPhone',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '联系人邮编',
          dataIndex: 'contactorZipCode',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '联系人详细地址',
          dataIndex: 'contactorAddress',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '上次维修日期',
          dataIndex: 'lastMaintainDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '上次维修里程',
          dataIndex: 'lastMaintainMileage',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '预计下次保养日期',
          dataIndex: 'nextMaintainDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '下次保养里程',
          dataIndex: 'nextMaintainMileage',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '提醒人',
          dataIndex: 'reminder',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '提醒内容',
          dataIndex: 'remindContent',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '提醒状态',
          dataIndex: 'remindStatus',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '提醒失败原因',
          dataIndex: 'remindFailReason',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '最后一次提醒时间',
          dataIndex: 'remindDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '客户反馈',
          dataIndex: 'customerFeedback',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '服务工程师',
          dataIndex: 'serviceAdvisor',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '销售日期',
          dataIndex: 'salesDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '是否激活',
          dataIndex: 'isValid',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '优惠截止日期',
          dataIndex: 'discountExpireDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: 'VIP编号',
          dataIndex: 'vipNo',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '定保专员',
          dataIndex: 'maintainAdvisor',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '上次保养日期',
          dataIndex: 'lastMaintenanceDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '上次保养里程',
          dataIndex: 'lastMaintenanceMileage',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '提醒方式',
          dataIndex: 'remindWay',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: 'DCRC专员',
          dataIndex: 'dcrcAdvisor',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '最近两次提醒时间',
          dataIndex: 'remindDateS',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '最近三次提醒时间',
          dataIndex: 'remindDateT',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        },
        {
          title: '上次维修时间',
          dataIndex: 'roCreateDate',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.ownerProperty}</span>;
          }
        }
      ];
    },
    getMaintenanceRemindTable(val) {
      this.fetchParams = Object.assign({}, val);
    },
    // 维修历史
    historyFun() {
      this.ishistorypop = true;
    },
    closeHandler() {
      this.ishistorypop = false;
    },
    closeHistory(val) {
      this.historyVisible = false;
    },

    //  建议维修
    importFun() {
      this.isimportpop = true;
    },

    // 投诉历史
    openComplaintHistory() {
      // if (this.selectColumns.length === 0) {
      //   this.$message.error('请选择表格数据');
      //   return;
      // }
      this.showComplaintHistory = true;
    },
    // 提醒历史
    showHistory() {
      this.historyVisible = true;
    },
    showRemind() {
      this.historyOpVisible = true;
    },
    showInput() {
      // if(this.selectColumn.length==0){
      //   this.$notify({
      //     // title: '警告',
      //     message: '请选择表格数据',
      //     type: 'warning'
      //   });
      // }else{
      // this.setInputdata=this.selectColumn[0];
      // this.inputVisible = true;
      // }
      this.inputVisible = true;
    },
    closeRemindOption() {
      this.historyOpVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.detail_main {
  border: 1px solid #ebeef5;
  margin-bottom: 10px;
  .detail_top {
    background: #f2f2f2;
    border-bottom: 1px solid #ebeef5;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    padding-right: 10px;
  }
  .detail_containter {
    padding-top: 10px;
  }
}
</style>
